<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <title>星球探索奖池</title>
  <link rel="stylesheet" href="/mobile/css/index.css" />
  <script src="/mobile/js/vue.js"></script>
  <script src="/mobile/js/vue-infinite-scroll.js"></script>
  <script src="/mobile/js/axios.min.js"></script>
  <script src="/mobile/js/vant.min.js"></script>
  <script src="/mobile/js/crypto-js.js"></script>
  <script src="/mobile/js/aes.js"></script>
  <script src="/mobile/js/common.js"></script>
  <style>
    * {
    margin: 0;
    padding: 0;
    user-select: none;
  }

  ul {
    list-style: none;
  }

  .infinite-list-wrapper {
    overflow-y: auto;
    height: 100vh;
    position: relative;
  }

  .box {
    width: 33.33%;
    overflow: hidden;
    min-height: 80px;
    padding: 5px;
    text-align: center;
  }

  .img-box {
    position: relative;
    font-size: 0;
    height: 33.33vw;
  }

  .rate {
    padding: 2px 4px;
    font-size: 8px;
    color: #1DF0FF;
    background: rgba(45, 45, 204, .7);
    border-radius: 10px;
    position: absolute;
    right: 9%;
    top: 9%;
    font-weight: bold;
  }

  .prize-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .prize-name {
    font-size: 12px;
    color: #fff;
    line-height: 1.5;
  }

  .prize-date {
    width: 35px;
    position: absolute;
    right: 10px;
    bottom: 10px;
  }

  .shell-icon {
    width: 14px;
    height: 14px;
    vertical-align: middle;
  }

  .shell-name {
    font-size: 12px;
    vertical-align: middle;
    color: #fff;
  }
  .van-tabs__nav {
    background: #3b54ad!important;
  }
  .van-tab {
    color: #fbb8fb!important;
  }
  .van-tab--active {
    color: #FA6478!important;
  }

  .van-tabs__content {
    min-height: calc(100vh - 44px);
  }

  .van-list__loading, 
  .van-loading__text, 
  .van-list__finished-text {
    color: #fff!important;
    font-size: 12px!important;
  }
  .empty {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
  }
  </style>
</head>

<body>
  <div id="app">
    <div class="infinite-list-wrapper">
      <!-- <van-tabs v-model="active" @click="tabClick" sticky>
        <van-tab :name="3" title="礼物"> -->
          <van-list
            v-model="loading"
            :finished="finished3"
            @load="load"
            :immediate-check="false"
          >
            <van-row>
              <van-col span="8" v-for="(item, index) in items3" :key="index" class="box">
                <div class="img-box">
                  <div class="rate">{{item.probability}}%</div>
                  <img class="prize-img" :src="item.url" alt="">
                </div>
                <div class="prize-name">{{item.name}}</div>
                <div class="shell-box">
                  <img class="shell-icon" src="/mobile/img/recharge-shell.png" alt="">
                  <span class="shell-name">{{item.awardCoin}}</span>
                </div>
              </van-col>
            </van-row>
          </van-list>
          <div v-if="finished3 && !items3.length" class="empty">空空如也</div>
        <!-- </van-tab> -->
        <!-- <van-tab :name="2" title="坐骑">
          <van-list
            v-model="loading"
            :finished="finished2"
            @load="load"
            :immediate-check="false"
          >
            <van-row>
              <van-col span="8" v-for="(item, index) in items2" :key="index" class="box">
                <div class="img-box">
                  <img class="prize-img" :src="item.url" alt="">
                  <img class="prize-date" src="/mobile/img/30day.png" alt="">
                </div>
                <div class="prize-name">{{item.name}}</div>
                <div class="shell-box">
                  <img class="shell-icon" src="/mobile/img/shell.png" alt="">
                  <span class="shell-name">{{item.awardCoin}}</span>
                </div>
              </van-col>
            </van-row>
          </van-list>
          <div v-if="finished2 && !items2.length" class="empty">空空如也</div>
        </van-tab> -->
        <!-- <van-tab :name="1" title="头像框">
          <van-list
            v-model="loading"
            :finished="finished1"
            @load="load"
            :immediate-check="false"
          >
            <van-row>
              <van-col span="8" v-for="(item, index) in items1" :key="index" class="box">
                <div class="img-box">
                  <img class="prize-img" :src="item.url" alt="">
                  <img class="prize-date" src="/mobile/img/30day.png" alt="">
                </div>
                <div class="prize-name">{{item.name}}</div>
                <div class="shell-box">
                  <img class="shell-icon" src="/mobile/img/shell.png" alt="">
                  <span class="shell-name">{{item.awardCoin}}</span>
                </div>
              </van-col>
            </van-row>
          </van-list>
          <div v-if="finished1 && !items1.length" class="empty">空空如也</div>
        </van-tab>
      </van-tabs> -->
    </div>
  </div>
  <script>
  var count = 0;

  new Vue({
    el: '#app',
    data: {
      finished1: false,
      finished2: false,
      finished3: false,
      items1: [],
      items2: [],
      items3: [],
      loading: false,
      noMore: false,
      limit: 10,
      page: 1,
      type: null,
      token: null,
      uid: null,
      active: 3,
      typeMap: {
        1: '头像框',
        // 2: '坐骑',
        3: '礼物',
      }
    },
    created() {
      const parse = (queryStr) => {
        const str = queryStr.replace(/^\?/, '')
        return str.split('&').reduce((pre, key) => {
          const [k, v] = key.split('=')
          pre[decodeURIComponent(k)] = decodeURIComponent(v)
          return pre
        }, {})
      }
      var data = parse(location.search)
      if (data.type && data.token) {
        this.type = Number(data.type)
        this.token = data.token
        this.getData()
      }
    },
    computed: {
      disabled() {
        return this.loading || this.noMore
      },
    },
    methods: {
      tabClick(name) {
        this.page = 1
        this.active = name
        this.finished1 = false
        this.finished2 = false
        this.finished3 = false
        this.items1 = []
        this.items2 = []
        this.items3 = []
        this.getData()
      },
      getData() {
        request.post('/api/business/app/extractAwardList/getAwardList', {
          awardType: this.active,
          extractType: this.type,
          limit: this.limit,
          page: this.page,
        }).then(res => {
          console.log(res)
          if (res.data && res.data.list) {
            if (res.data.list.length) {
              if (this.active == 1) {
                this.items1 = this.items1.concat(res.data.list)
              }
              // if (this.active == 2) {
              //   this.items2 = this.items2.concat(res.data.list)
              // }
              if (this.active == 3) {
                this.items3 = this.items3.concat(res.data.list)
              }
            } else {
              this.noMore = true
              this.finished1 = true
              this.finished2 = true
              this.finished3 = true
            }
            this.loading = false
          }
        })
      },
      load() {
        this.loading = true
        this.page++
        this.getData()
      },
    }
  });
  </script>
</body>

</html>